<template>
  <div>
    <el-button type="primary" @click="dirlogshow">增加</el-button>
    <hr />
    <el-table :data="arr.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.tit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- --------------------------- -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.tit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureFn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ------------------------------- -->
    <!-- 删除的弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--  分液器------------------------ -->
     <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="arr.length">
    </el-pagination>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      dialogFormVisible: false,//编辑和增加的弹窗
      dialogVisible:false,// 控制删除窗的显示与隐藏
      formLabelWidth: "120px",
      form: {
        name: "",
        tit: "",
        date: "",
      },
      deleteIndex: 0, // 删除的下标
      title:"新增",
      index:0,// 是编辑对应的下标
      pageSize:4,
      currentPage:1,
    };
  },
  methods: {
    // 编辑函数
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true
      this.form = row
      this.title = "编辑"
      this.index = index
    },
    // 删除函数
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible = true
      this.deleteIndex = index
    },
    ...mapActions({
      getArr: "Menu/getArr",
    }),
    ...mapMutations({
      addFn: "Menu/addFn",
      delFun:"Menu/delFun",
      editFn:"Menu/editFn"
    }),
    // 点击增加按钮显示弹窗的方法
    dirlogshow() {
      this.dialogFormVisible = true;
    },
    // 弹窗确定按钮的方法
    sureFn() {
      this.dialogFormVisible = false;
      if (this.title == "新增") {
            this.addFn(this.form);
            this.form = {};
      } else {
           this.editFn(Object.assign({},this.form,{index:this.index}))
      }

     
    },
    // 点击删除时候的确定
    delFn(){
           this.dialogVisible = false;
           this.delFun(this.deleteIndex)

    },
    // 分页器的相关方法
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
      }
  },
  computed: {
    ...mapState({
      arr: (state) => state.Menu.arr,
    }),
  },
  // create和monted都可以发起请求
  created() {
    this.getArr();
  },
};
</script>

<style>
</style>